---
import type { LogoKey } from '~/data/logos';
import BrandLogo from '../BrandLogo.astro';

export interface Props {
	href: string;
	logo?: LogoKey;
	current?: boolean;
	minimal?: boolean;
	[key: string]: any;
}

const { href, logo, current, minimal, class: classes, ...attrs } = Astro.props as Props;
---

<li class:list={['card', minimal && 'card--minimal', classes]} {...attrs}>
	{logo && <BrandLogo brand={logo} />}
	<div class="stack sl-flex">
		<h3>
			<a href={href} aria-current={current ? 'page' : 'false'}>
				<slot name="title" />
			</a>
		</h3>
		{!minimal && <slot name="details" />}
	</div>
</li>

<style>
	.card {
		position: relative;
		margin: -0.75rem;
		padding: 0.75rem;
		display: grid;
		grid-template-columns: auto 1fr;
		gap: 0.5rem;
		align-items: center;
		border-radius: 0.5rem;
	}
	.card--minimal {
		grid-template-columns: 1fr;
		justify-items: center;
		text-align: center;
	}

	.card:hover,
	.card:focus-within {
		background-color: var(--sl-color-gray-6);
		outline: 1px solid var(--sl-color-text-accent);
	}
	@media (forced-colors: active) {
		.card:hover,
		.card:focus-within {
			outline: 1px solid LinkText;
		}
	}

	.stack {
		flex-direction: column;
		gap: 0.5rem;
	}

	h3 {
		line-height: var(--sl-line-height-headings);
		font-size: var(--sl-text-lg);
		font-weight: 600;
	}

	.card--minimal h3 {
		font-size: var(--sl-text-body);
	}

	a {
		text-decoration: none;
		color: var(--sl-color-white);
	}

	a:focus {
		outline: none;
	}

	/* Capture clicks on the whole card for this link */
	a::before {
		content: '';
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
	}
</style>
